<template>
	<div class="page">
		<div class="Sosu" style="padding-bottom: 20px; border-bottom: #000000 1px solid;">
			<el-select v-model="value" placeholder="可选条件" style="width: 100px;">
				<el-option key="1" label="床号" value="bed_num" name="choose" />
				<el-option key="2" label="姓名" value="user_name" name="choose" />
			</el-select>
			<input type="text" v-model="condition" placeholder="请输入查询条件" style="height: 32px;" />
			<el-button plain v-on:click="find(value,condition)">查询</el-button>
		</div>

		<div class="count">
			<span style="">楼层：</span>
			<el-select v-model="floorvalue" class="RightMargin" placeholder="可选条件" style="width: 100px;"
				v-on:change="chooseFloor(floorvalue)">
				<el-option key="1" label="一楼" value="1" name="floor" />
				<el-option key="2" label="二楼" value="2" name="floor" />
				<el-option key="3" label="三楼" value="3" name="floor" />
				<el-option key="4" label="四楼" value="4" name="floor" />
			</el-select>
			<span class="RightMargin">总床数：{{AllCount}}</span>
			<span class="RightMargin">有人：{{ExCount}}</span>
			<span class="RightMargin">离开：{{leftCount}}</span>
			<span class="RightMargin">退住：{{StayBackCount}}</span>
			<span class="RightMargin">空床位：{{FreeCount}}</span>
		</div>

		<div style="box-shadow: 10px 10px 5px #888888; text-align:  center;">
			<form class="playfrom">
				<div class="fader" v-for="value in bed">
					<div class="child" v-if="value.status==1">
						<img class="childImg" src="../../img/bed_use.png" v-on:click="showMessage(value.bedNum)" />
						<br />
						<span>{{value.bedNum}}</span>
					</div>
					<div class="child" v-else-if="value.status==2">
						<img class="childImg" src="../../img/bed_left.png" v-on:click="left()" />
						<br />
						<span>{{value.bedNum}}</span>
					</div>
					<div class="child" v-else-if="value.status==0" v-on:click="free()">
						<img class="childImg" src="../../img/bed_free.png" />
						<br />
						<span>{{value.bedNum}}</span>
					</div>
					<div class="child" v-else-if="value.status==3">
						<img class="childImg" src="../../img/bed_Stayback.png" />
						<br />
						<span>{{value.bedNum}}</span>
					</div>
				</div>
			</form>
		</div>
		<el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="1000px">
			<selectOne v-if="show" :show.sync="show" @getData="list()" :bedNum="bedNum"></selectOne>
		</el-dialog>
	</div>
</template>



<script>
	import selectOne from '@/views/bed/select_one'
	export default {
		name: 'Bed',
		data() {
			return {
				bedNum: 0,
				show: false,
				title: '',
				bed: [],
				pages: 0,
				floorvalue: '',
				value: '',
				AllCount: 0,
				ExCount: 0,
				leftCount: 0,
				StayBackCount: 0,
				FreeCount: 0,
				condition: ''
			}
		},
		methods: {
			list() {
				this.axios.get('/bed/list', response => {
					this.bed = response.obj.records;
					this.pages = response.obj.pages;
				});
			},
			free() {
				this.$alert('改床位没有老人', '提示', {
					confirmButtonText: '确定',
				});
			},
			chooseFloor(floor) {

				this.axios.get('/bed/floor?floor=' + floor, eq => {
					this.bed = eq.obj;
				});
			},
			left() {
				this.$message({
					message: '该床老人已经离开',
					type: 'warning'
				});
			},
			count() {
				this.axios.get('/bed/count', response => {
					this.AllCount = response.obj.AllCount;
					this.ExCount = response.obj.ExCount;
					this.leftCount = response.obj.leftCount;
					this.FreeCount = response.obj.FreeCount;
					this.StayBackCount = response.obj.StayBackCount;
				});
			},
			find(value, condition) {
				this.axios.get('/bed/findByCondition?ConditionName=' + value + "&ConditionValue=" + condition,
				response => {
					this.bed = response.obj.records;
					this.pages = response.obj.pages;
				});
			},
			showMessage(bedNum) {
				this.title = "老人详细信息";
				this.bedNum = bedNum;
				this.show = true;
				
			}
		},
		created() {
			this.chooseFloor(1);
			this.count();
		},
		components: {
			selectOne
		}
	}
</script>

<style scoped>
	.page {
		color: #000000;
		display: block;
	}

	.RightMargin {
		margin-right: 20px;
	}

	.count {
		margin-bottom: 5px;
		margin-top: 20px;
	}

	.child {
		flex: 1;
		width: 120px;
		height: 120px;
		border: 1.5px solid skyblue;
		border-radius: 5px;
		box-shadow: 7px 6px 5px lightgray;
		text-align: center;
	}

	.playfrom {
		width: 100%;
		height: 100%;

	}

	.fader {
		display: inline-block;
		width: 15%;
		margin: 20px 20px;

	}

	.child .childImg {
		width: 100px;
		height: 90px;
	}
</style>
